<div class='card'>
  <div class='card-header'>
    {{pageTitle + ': ' + product?.productName}}
  </div>

  <div class='card-body'
       *ngIf='product'>
    <div class='row'>
      <div class='col-md-8'>
        <div class='row'>
          <div class='col-md-4'>Name:</div>
          <div class='col-md-8'>{{product.productName}}</div>
        </div>
        <div class='row'>
          <div class='col-md-4'>Code:</div>
          <div class='col-md-8'>{{product.productCode | lowercase | convertToSpaces: '-'}}</div>
        </div>
        <div class='row'>
          <div class='col-md-4'>Description:</div>
          <div class='col-md-8'>{{product.description}}</div>
        </div>
        <div class='row'>
          <div class='col-md-4'>Availability:</div>
          <div class='col-md-8'>{{product.releaseDate}}</div>
        </div>
        <div class='row'>
          <div class='col-md-4'>Price:</div>
          <div class='col-md-8'>{{product.price|currency:'USD':'symbol'}}</div>
        </div>
        <div class='row'>
          <div class='col-md-4'>5 Star Rating:</div>
          <div class='col-md-8'>
            <pm-star [rating]='product.starRating'>
            </pm-star>
          </div>
        </div>
      </div>

      <div class='col-md-4'>
        <img class='center-block img-responsive'
             [style.width.px]='200'
             [style.margin.px]='2'
             [src]='product.imageUrl'
             [title]='product.productName'>
      </div>
    </div>
  </div>

  <div class='card-footer'>
    <button class='btn btn-outline-secondary'
            style='width:80px'
            (click)='onBack()'>
      <i class='fa fa-chevron-left'></i> Back
    </button>
  </div>
</div>